<template>
  <div>
    <button @click="generate">导出</button>
  </div>
</template>

<script>
  import 'docxtemplater/build/docxtemplater.js'
  import 'pizzip/dist/pizzip.js'
  import 'pizzip/dist/pizzip-utils.js'
  import 'file-saver'

  export default {
    data() {
      return {
        wordData: {
          firstparty: '甲方公司',
          number: '123',
          ShopUserwpgmDetailed: [
            {
              index: '0',
              mc: '1111',
              gg: '222',
              dw: 'tai',
              number: '10',
              je: '10',
              jez: '20',
              bz: '111',
            },
            {
              index: '2',
              mc: '1111',
              gg: '222',
              dw: 'tai',
              number: '10',
              je: '10',
              jez: '20',
              bz: '111',
            },
          ],
          jehj: '合计金额',
          jedx: '一二三',
          fwf: '20',
          dz: '啊啊啊啊啊啊啊',
          uxm: '名称',
          utel: '15669054328',
          jhtime: '7',
          bxtime: '1',
          dwqc: '单位全称',
          frdb: '法人代表',
          khm: '开户名',
          khh: '开户行',
          zh: '帐号',
          sh: '税号',
        },
        wordData2: {
          name: '导出word',
          nameList: [
            {
              name: '张三',
              age: 16,
              hobby: ['吃饭', '睡觉', '打豆豆'],
            },
            {
              name: '李四',
              age: 19,
              hobby: ['抽烟', '喝酒', '打麻将'],
            },
          ],
        },
      }
    },

    methods: {
      // 导出word
      loadFile(url, callback) {
        PizZipUtils.getBinaryContent(url, callback)
      },
      generate() {
        var that = this
        this.loadFile('/word/word.docx', function (error, content) {
          //url模板存放的位置
          if (error) {
            throw error
          }
          var zip = new PizZip(content)
          var doc = new window.docxtemplater().loadZip(zip)
          doc.setData({
            ...that.wordData, //导入到模板文档的数据对象
          })
          try {
            // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
            doc.render()
          } catch (error) {
            var e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties,
            }
            console.log(
              JSON.stringify({
                error: e,
              })
            )
            // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).
            throw error
          }
          var out = doc.getZip().generate({
            type: 'blob',
            mimeType:
              'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          }) //Output the document using Data-URI
          saveAs(out, '充电桩购销合同（简略）.docx')
        })
      },
    },
  }
</script>

<style scoped></style>
